<!--首页组件-->
<template>
<div>
  <el-row>
    <!--分店分布情况-->
    <el-col :span="8">
      <el-card class="box-card" style="width: 100%;">
        <div slot="header" class="clearfix" style="color: #ffffff; font-style: normal; font-size: 18px">
          <span>分店分布情况</span>
        </div>
        <div class="text item" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)" element-loading-spinner="el-icon-loading">
          <ve-map :data="chartData01" :settings="chartSettings01" :extend="chartExtend01" height="300px"></ve-map>
        </div>
      </el-card>
    </el-col>
    <!--收益情况-->
    <el-col :span="7" :offset="1">
      <el-card class="box-card" style="width: 100%;">
        <div slot="header" class="clearfix" style="color: #ffffff; font-style: normal; font-size: 18px">
          <span>收益情况</span>
        </div>
        <div class="text item" style="overflow: hidden; height: 300px">
          <div id="charData02" :style="{height: '300px', width:'110%' , marginTop:'20px'}"></div>
        </div>
      </el-card>
    </el-col>
    <!--月任务清单-->
    <el-col :span="7" :offset="1">
      <el-card class="box-card" style="width: 100%;">
        <div slot="header" class="clearfix" style="color: #ffffff; font-style: normal; font-size: 18px">
          <span>月任务清单</span>
        </div>
        <div class="text item" style="overflow: hidden; height: 300px">
          <div style="height: 45px; margin-top: 5px">
            <el-button type="success" round @click="isAddDialog = true, addTask.task=''" :disabled="isAddButtonUse">添加</el-button>
          </div>
            <el-table
              :data="tableData"
              height="250"
              border
              style="width: 100%">
              <el-table-column
                prop="task"
                label="任务"
                width="208px">
              </el-table-column>
              <el-table-column prop="taskId" label="操作" width="50px">

                <template slot-scope="scope">
                  <el-popconfirm
                    icon="el-icon-info"
                    iconColor="red"
                    title="确定删除本条任务吗？"
                    @onConfirm="del(scope.row.taskId)">
                    <!--@click="del(scope.row.taskId)"-->
                    <el-button slot="reference" type="danger" circle style="width: 30px; height: 30px;" :disabled="isDelButtonUse">
                      <i class="el-icon-delete" style="position: absolute; top: 20px; left: 18px"></i>
                    </el-button>
                   </el-popconfirm>
                </template>

              </el-table-column>
            </el-table>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <!--底部-->
  <el-row style="margin-top: 20px;">
    <el-card class="box-card" style="height: 175px">
      <el-row>
        <el-col :span="5" style="background: #e36159; height: 165px; border-radius: 10px; margin-top: 5px; margin-left: 20px">
          <div style="text-align: center; color: #ffffff; padding-top: 20px">
            <h4>今日访问次数</h4>
            <div style="font-size: 50px; padding-top: 20px">
              <h1>130</h1>
              <i class="el-icon-view" style="color: rgba(225,225,225,0.3); position: absolute;
              left: 2%; top: 22%; font-size: 150px"></i>
            </div>
          </div>
        </el-col>
        <el-col :span="5" :offset="1" style="background: #23b7e5; height: 165px; border-radius: 10px; margin-top: 5px">
          <div style="text-align: center; color: #ffffff; padding-top: 20px">
            <h4>今日会员新增</h4>
            <div style="font-size: 50px; padding-top: 20px">
              <h1>216</h1>
              <i class="el-icon-data-line" style="color: rgba(225,225,225,0.3); position: absolute;
              left: 27%; top: 16%; font-size: 150px"></i>
            </div>
          </div>
        </el-col>
        <el-col :span="5" :offset="1" style="background: #7266ba; height: 165px; border-radius: 10px; margin-top: 5px">
          <div style="text-align: center; color: #ffffff; padding-top: 20px">
            <h4>系统在线人数</h4>
            <div style="font-size: 50px; padding-top: 20px">
              <h1>11</h1>
              <i class="el-icon-timer" style="color: rgba(225,225,225,0.3); position: absolute;
              left: 51%; top: 16%; font-size: 150px"></i>
            </div>
          </div>
        </el-col>
        <el-col :span="5" :offset="1" style="background: #2baab1; height: 165px; border-radius: 10px; margin-top: 5px">
          <div style="text-align: center; color: #ffffff; padding-top: 20px">
            <h4>本月星星之店</h4>
            <div style="font-size: 18px; padding-top: 22px">
              <h1>宠达成都大悦城店</h1>
              <h1>宠达成都环球中心店</h1>
              <i class="el-icon-trophy" style="color: rgba(225,225,225,0.3); position: absolute;
              left: 76%; top: 16%; font-size: 150px"></i>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </el-row>

  <!--添加月任务弹出框-->
  <el-dialog
    title="添加月任务"
    :visible.sync="isAddDialog"
    width="30%">
    <div style="margin-top: -10px; margin-bottom: -25px">
      <el-form :model="addTask">
        <el-form-item>
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="addTask.task">
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="isAddDialog = false">取 消</el-button>
    <el-button type="primary" @click="onSubmitAddTask">确 定</el-button>
  </span>
  </el-dialog>

</div>
</template>

<script>
    export default {
      name: "MainIndex",
      beforeRouteEnter(to, form, next){
        next(vm => {
          // vm.getTask();
          setTimeout(function () {
            vm.loading = false;
          },1500);
          // 当数据请求过程中，会进行2秒的加载动画
        });
      },
      mounted(){
        this.drawLine();
        this.getTask();
      },
      methods:{
        // Echarts 曲线图 收益情况
        drawLine(){
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('charData02'))
          myChart.setOption({
            tooltip: {},
            color: ['#CC3366','#99CC33'],
            title:{
              left: "center",
              padding: 20,
              subtext: '单位：万元'
            },
            legend: {
              data:['营业收入','净利润']
            },
            xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月']
            },
            yAxis: {
              type: 'value',
              min: 300
            },
            series: [{
              name: '营业收入',
              data: [680, 678, 690, 685, 688, 702],
              type: 'line',
              smooth: true
            },
              {
                name: '净利润',
                data: [445, 443, 465, 460, 453, 477],
                type: 'line',
                smooth: true
              }
            ]
          });
        },
        // 获取任务
        getTask(){
          this.axios.get("/api/task").then((response)=>{
            if (response.data.statusCode == "200"){
              this.tableData = response.data.data;
            }
          })
        },
        // 提交添加的任务
        onSubmitAddTask(){
          this.isAddDialog = false;
          console.log(this.addTask.task);
          let regExp = /^\s*$/;
          let reg = new RegExp(regExp);
          let taskContent = this.addTask.task;
          if(this.addTask.task != '' && !taskContent.match(reg)){
            this.axios({
              url: '/api/task',
              method: "post",
              data: JSON.stringify({
                task: taskContent
              }),
              headers:{
                'Content-Type': 'application/json; charset=utf-8'
              }
            }).then(response=>{
              if (response.data.statusCode == "200"){
                this.$message({
                  message: '任务添加成功！',
                  type: 'success'
                });
                this.getTask();
              }else {
                this.$message({
                  message: '任务添加失败！',
                  type: 'error'
                });
              }
            });

          }
        },
        // 气泡确认框 触发删除事件方法
        confirm(){
          this.$emit('onConfirm')
        },
        // 任务删除
        del(value){
          this.taskId = value;
          // 成功之后弹框
          this.axios.delete('/api/task',{params:{taskId:value}}).then((response)=>{
            if(response.data.statusCode == "200"){
              this.$message({
                message: value + '编号月任务删除成功！',
                center: true,
                type: 'success'
              });
              this.getTask();
            }else {
              this.$message({
                message: value + '编号月任务删除失败！',
                center: true,
                type: 'error'
              });
            }
          })

          // console.log(this.taskId)
        }
      },
      data () {
        // vCharts 地图
        this.chartSettings01 = {
          position: 'province/sichuan',
          label: false
        }
        this.chartExtend01 = {
          legend:{show:false},
          color: false,
          backgroundColor:'#fff',
          visualMap: {
            min: 0,
            max: 6,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['#fff','lightskyblue', 'yellow', 'orangered']
            }
          },
          tooltip: {
            trigger: 'item'
          },
        }
        return {
          // vCharts 地图信息
          chartData01: {
            columns: ['位置', '店铺'],
            rows: [
              { '位置': '成都市', '店铺': 6 },
              { '位置': '绵阳市', '店铺': 2 },
              { '位置': '自贡市', '店铺': 1 },
              { '位置': '攀枝花市', '店铺': 3 },
              { '位置': '泸州市', '店铺': 0 },
              { '位置': '德阳市', '店铺': 0 },
              { '位置': '广元市', '店铺': 2 },
              { '位置': '遂宁市', '店铺': 0 },
              { '位置': '内江市', '店铺': 0 },
              { '位置': '乐山市', '店铺': 0 },
              { '位置': '资阳市', '店铺': 0 },
              { '位置': '宜宾市', '店铺': 1 },
              { '位置': '南充市', '店铺': 0 },
              { '位置': '达州市', '店铺': 0 },
              { '位置': '雅安市', '店铺': 1 },
              { '位置': '阿坝藏族羌族自治州', '店铺': 0 },
              { '位置': '甘孜藏族自治州', '店铺': 0 },
              { '位置': '凉山彝族自治州', '店铺': 0 },
              { '位置': '广安市', '店铺': 0 },
              { '位置': '巴中市', '店铺': 0 },
              { '位置': '眉山市', '店铺': 2 }
            ]
          },
          // Task信息
          tableData: [
            // {
            //   taskId: 1,
            //   task: '张还行'
            // }
            ],
          // 添加task用的中间量
          addTask: {
            task:''
          },

          loading: true,
          isAddDialog: false, // 是否显示添加目标清单窗口
          delID: 0, // 由table的数据传递给窗口
          isAddButtonUse: false, // 添加目标清单的按钮是否被禁用
          isDelButtonUse: false // 删除目标清单的按钮是否被禁用
        }
      }
    }
</script>

<style lang="scss" scoped>

</style>
